<template>
    <div>
        <slot />
        <selectTool :system.sync="query.system" :city.sync="query.city" :channel.sync="query.channel" />
        <div class="flex chart">
            <ve-ring class="item" :data="current" :settings="chartSettings" :extend="currentExtend" />
            <ve-ring class="item" :data="chartData" :settings="chartSettings" :extend="extend" />
        </div>
        <!-- <p style="display:none">{{ tableData }}</p> -->
    </div>
</template>

<script>
import veRing from 'v-charts/lib/ring.common.js'
import 'echarts/lib/component/title'
import selectTool from '../selectTools'
const _extend = () => ({
    title: {
        // 文字啥的，用\n可以换行
        text: '',
        // 调整位置
        x: 'center',
        top: '45%',
        // 调整样式
        textStyle: {
            fontSize: 20,
            fontWeight: 'normal'
        }
    },
    label: {
        formatter: '{b}: {d}%'
    }
})
export default {
    name: 'Users',
    components: {
        veRing,
        selectTool
    },
    model: {
        prop: 'tbDt',
        event: 'vmodel'
    },
    props: {
        type: String,
        tbDt: Array
    },
    data () {
        this.chartSettings = {
            dimension: '用户类型'
            // metrics: ['统计数']
        }
        return {
            total: 0,
            query: {
                channel: null,
                city: null,
                system: null,
                pageNum: 1,
                pageSize: 50
            },
            chartData: { },
            current: { },
            tableData: []
        }
    },
    computed: {
        currentExtend () {
            const total = this.current.rows.reduce((result, next) => result + next.统计数, 0)
            const extend = _extend()
            extend.title.text = `${total || 0}\n筛选总数`
            return extend
        },
        extend () {
            const total = this.chartData.rows.reduce((result, next) => result + next.统计数, 0)
            const extend = _extend()
            extend.title.text = `${total || 0}\n${this.type}总数`
            return extend
        }
    },
    watch: {
    },
    created () {
        this.Query()
    },
    updated () {
        // this.$emit('vmodel', this.tableData)
        // console.log('前台')
        // this.Update()
    },
    methods: {
        Update () {
            this.$emit('updata', { tableData: this.tableData, total: this.total, pageSize: this.query.pageSize, pageNum: this.query.pageNum })
        },
        Query () {
            HTTP('用户存量', this.query).then(({ data: { condData, totalData, list, numTotal } = {} } = {}) => {
                totalData.columns = totalData.columns = ['用户类型', '统计数']
                this.current = condData || {}
                this.chartData = totalData || {}
                this.tableData = list || []
                this.total = numTotal || 0
                this.Update()
            })
        }
    }
}
</script>
